<style scoped="true" lang="less">
	.title {
		height: 40px;
		line-height: 40px;
		padding-left: 17px;
	}
	
	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		height: 47px;
		padding: 0 17px;
	}
	
	.letters {
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		justify-content: flex-start;
		.letter {
			width: 25%;
			min-height: 47px;
			border-bottom: 1px solid #ebebeb;
		}
	}
	
	.top {
		position: fixed;
		bottom: 10px;
		right: 10px;
		opacity: 0.5;
		font-size: 35px;
	}
</style>
<template>
	<div id="city">
		<section>
			<div class="title">GPS定位你所在城市</div>
			<div class="row cfc">
				{{city}}
			</div>
		</section>
		<section>
			<div class="title">热门城市</div>
			<div class="row">
				<span>北京</span>
				<span>上海</span>
				<span>广州</span>
				<span>深圳</span>
			</div>
		</section>
		<section>
			<div class="title">按字母排序</div>
			<ul class="letters">
				<span @click="toCity(key)" v-for="(value,key,index) in cityObj" :key="key" class="letter ifcc"> {{key}} </span>
			</ul>
		</section>
		<div>
			<section v-for="(value,key) in cityObj" :key="key" v-if="value.length>0" :id="key">
				<div class="title">{{key}}</div>
				<ul class="letters">
					<span class="letter ifcc tac" v-for="item in value" :key="item.id">{{item.name}}</span>
					<!--<span  class="letter ifcc tac" v-for="item in 4-(value.length)%4" v-if="value%4!==0"></span>-->
				</ul>
			</section>
		</div>
		<i v-show="scrollTop > 400" @click="toTop" class="icon iconfont icon-huidaodingbu top"></i>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				// 26个字母
				letters: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
				// 城市数组
				cities: [],
				scrollTop: 0
			}
		},

		created() {
			this.getCities();
		},
		
		mounted() {
			// 监听滚动事件
			window.onscroll = () => {
				this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			}
		},

		computed: {
			// 从store里读取city
			...mapGetters(['city']),
			// 对城市进行改造,把数据按a-z分组后放进cityObj对象里
			cityObj() {
				// 定义一个空对象,用来按字母存放城市,最后得到类似下面的一个数据结构
				/**
				 * {
				 * 	A: [],
				 *  B: [],
				 * 	C: []
				 * }
				 */
				let obj = {};
				// 用来存放按字母筛选后的城市数组
				let cityArr = [];
				// 循环26个字母
				for(let p of this.letters) {
					// 根据字母去筛选城市
					cityArr = this.cities.filter(item => {
						// 取城市名称的首字母跟p进行匹配
						return item.pinyin[0] === p;
					})
					// 如果城市数组长度不为空
					if(cityArr.length > 0) {
						// 把城市数组添加到obj对象里
						obj[p] = cityArr;
					}
				}
				return obj;
			}
		},

		methods: {
			// 回到顶部
			toTop() {
				window.scrollTo(0,0);	
			},
			
			
			toCity(key) {
				// 获取元素
				let ele = document.getElementById(key);
				// 获取该元素到顶部的距离
				let offsetTop = ele.offsetTop;
				// 头部是50px,所有需要减去50
				window.scrollTo(0, offsetTop - 50);
			},
			// 获取所在城市列表
			getCities() {
				let url = '/city';
				let data = {}
				this.fetch(url, data, res => {
					this.cities = res.cities;
				})
			}
		}
	}
</script>